@import url(css3.less);
html,body{height: 100%;}
body{display: flex; align-items: center; justify-content: center;}
@long:100px; 
@width:4px; 
@bColor:#000;
@time: 1.5s;
#run-man{ 
	font-size: 0;  position: relative;
	width:1.4 * @long; height: 3.5 * @long;
	>div{
		position: absolute; z-index: 1;
	}
	.leg{
		width: @width; height: @long / 2; background-color: @bColor; position: relative;
	}
	.run-head{ 
		width: @long; height: @long; border: @width solid  @bColor; background-color: #fff; border-radius: 50%;
	}
	.run-body{ 
		width: @width; height: 1 * @long; background-color:  @bColor; top:  @width + @long; left: @long/2;
	}
	.run-left-hand{
		top:3 * @long / 2; left: @long / 2; .transform(rotate(30deg));.to(0 0);
		.hand-1{
			
		}
		.hand-2{
			.to(0 0);
		}
	}
	.run-right-hand{
		top:3 * @long / 2; left: @long / 2; .transform(rotate(-30deg));.to(0 0);
		.hand-1{
			
		}
		.hand-2{
			.to(0 0); 
		}
	}
	.run-left-foot{
		top:2 * @long; left: @long / 2; .transform(rotate(30deg));.to(0 0);
		.foot-1{
			
		}
		.foot-2{
			.to(0 0); top: -4px;
		}
	}
	.run-right-foot{
		top:2 * @long; left: @long / 2; .transform(rotate(-30deg));.to(0 0);
		.foot-1{
			
		}
		.foot-2{
			.to(0 0); top: -4px;
		}
	}
}

.run{
	@timeFuc:ease-in-out;.to(70% 70%);
	.animation(run-body @time @timeFuc infinite alternate);
	.run-left-hand{
		.animation(run-left-hand @time @timeFuc infinite alternate);
		.hand-2{
			.transform(rotate(-80deg));
			
		}
	}
	.run-right-hand{
		.animation(run-right-hand @time @timeFuc infinite alternate);
		.hand-2{
			.transform(rotate(-80deg));
		}
	}
	.run-left-foot{
		.animation(run-left-foot @time @timeFuc infinite alternate);
		.foot-2{
			.transform(rotate(120deg));
			.animation(run-left-leg @time @timeFuc infinite alternate);
		}
	}
	.run-right-foot{
		.animation(run-right-foot @time @timeFuc infinite alternate);
		.foot-2{
			.transform(rotate(120deg));
			.animation(run-right-leg @time @timeFuc infinite alternate);
		}
	}
}
@-webkit-keyframes run-body
{
	0%   {.transform(rotate(5deg)translateY(0));}
	50%  {.transform(rotate(15deg)translateY(@long / 10));}
	100% {.transform(rotate(5deg)translateY(0));}
}
@-webkit-keyframes run-left-hand
{
	0%   {.transform(rotate(-90deg));}
	50%  {.transform(rotate(120deg));}
	100% {.transform(rotate(-90deg));}
}
@-webkit-keyframes run-right-hand
{
	0%   {.transform(rotate(120deg));}
	50%  {.transform(rotate(-90deg));}
	100% {.transform(rotate(120deg));}
}
@-webkit-keyframes run-left-foot
{
	0%   {.transform(rotate(-70deg));}
	50%  {.transform(rotate(40deg));}
	100% {.transform(rotate(-70deg));}
}
@-webkit-keyframes run-right-foot
{
	0%   {.transform(rotate(40deg));}
	50%  {.transform(rotate(-70deg));}
	100% {.transform(rotate(40deg));}
}
@-webkit-keyframes run-left-leg
{
	0%   {.transform(rotate(20deg));}
	50%  {.transform(rotate(80deg));}
	100% {.transform(rotate(20deg));}
}
@-webkit-keyframes run-right-leg
{
	0%   {.transform(rotate(80deg));}
	50%  {.transform(rotate(20deg));}
	100% {.transform(rotate(80deg));}
}